朱寇 16:55:17
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>tab切换</title>
    <style>
      ul,
      li {
        list-style: none;
      }
      .tab {
        display: flex;
      }
      .tab li {
        margin: 5px;
        cursor: pointer;
      }
      .tab li.current {
        background-color: green;
      }
      .content {
        width: 200px;
        height: 200px;
        background-color: yellow;
      }
      .content > div {
        display: none;
      }
      .content .current {
        display: block;
      }
    </style>
  </head>
  <body>
    <ul class="tab">
      <li data-index="0" class="current">关二爷</li>
      <li data-index="1">张三爷</li>
      <li data-index="2">赵四爷</li>
    </ul>
    <div class="content">
      <div class="current">我是你羽哥</div>
      <div>我是你黑哥</div>
      <div>我是你龙哥</div>
    </div>
    <script>
           // 1. 点击tab区域实现排他
      var ul = document.querySelector("ul");
      var content = document.querySelectorAll(".content > div");
      ul.onclick = function (e) {
        console.dir(e.target);
        if (e.target.tagName === "LI") {
          // 实现排他
          // 1.1 杀死所有人
          for (var i = 0; i < ul.children.length; i++) {
            ul.children[i].className = "";
            content[i].className = "";
          }
          // 1.2 自己满血复活
          e.target.className = "current";

          // 获取点击的那个元素的索引
          // var index = e.target.dataset.index
          // var index = e.target.dataset['index']
          var index = e.target.getAttribute("data-index");
          // console.log(index)
          content[index].className = "current";
        }
      };
      

    </script>
  </body>
</html>